<template>
	<view class="orderList">
		<view class="orderList_nav">
			<view class="orderList_conteot" v-for="(item,index) in addData" :key='index'>
				<view @click="orderList(index)" :class="index==active?'activelist':''">
					<text>{{item.text}}</text>
				</view>
			</view>
		</view>
		<view class="order_bottom">

			<swiper class="order_content" style="height: 100%;" :autoplay="autoplay" :current='active' @change="intervalChange">
				<swiper-item v-for="(item,index) in addData" :key='index'>
					<view v-if="orderItems.length<=0" class="empty">
						<image src="../../static/errorImage.jpg" mode=""></image>
					</view>
					<scroll-view :scroll-y="true" style="height: 100%;" @scrolltolower='Bottom'>
						<view v-for="(item,index) in orderItems" :key='index' class="swiper-content">

							<view class="swiper-top">
								<view>{{item.gmtCreate|timeStamp}}</view>
								<text>{{item.status|state}}</text>
							</view>
							<view v-for="(items,inde) in item.skuList" :key='inde' class="order_ttp">
								<view class="swiper-centre">
									<image :src="items.img"></image>
									<view class="centre_text">
										<view class="centre_name">{{items.spuTitle}}</view>
										<text>{{items.title}} x {{items.num}}</text>
										<view>￥{{items.price/100}}</view>
									</view>
								</view>
								<view class="swiper-bottom">
									共 <text>{{items.num}}</text>件商品 实付款
									<text style="font-size: 32upx;">￥{{items.price/100*items.num}}</text>
								</view>
								<view class="action-box" @click="amend()">
									<view class="action-btn" v-if="item.status==20"><text>申请退款</text></view>
									<view class="action-btn" v-if="item.status==10"><text>取消订单</text></view>
									<view class="action-btn" v-if="item.status==10"><text>立即支付</text></view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<uni-popup ref="popup" type="dialog">
			<uni-popup-messages type="input" message="成功消息" :duration="2000" :before-close="true" @close="close" @confirm="confirm"></uni-popup-messages>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopupMessages from '@/components/uni-popup/uni-popup-messages.vue'
	export default {
		components: {
			uniPopupMessages,
		},
		data() {
			return {
				active: 0, //定义下标
				addData: [{
					text: '全部'
				}, {
					text: '待付款'
				}, {
					text: '待出库'
				}, {
					text: '待收货'
				}, {
					text: '待评价'
				}, {
					text: '退款中'
				}],
				indicatorDots: true,
				autoplay: false,
				Token: "",
				times: "",
				data: "",
				orderItems: [],
				// 分页
				total: 1, //总页数
				pageNo: 0, //当前页码
				pageSize: 10, //每页显示多少条数据
			}
		},
		onLoad(e) {
			console.log(e)
			this.times = e.times
			this.data = e.data
			this.Token = uni.getStorageSync('Token')
			uni.showLoading({
				title: "加载中...."
			})
			uni.request({
				url: this.$C.webUrl + `m.api?_gp=order&_mt=getOrderPage`,
				header: {
					'accessToken': this.Token
				},
				success: (res) => {
					console.log(res)
					uni.hideLoading()
					this.orderItems = res.data.data.items
					this.pageNo = res.data.data.pageNo
					this.pageSize = res.data.data.pageSize
					this.total = res.data.data.total
				}
			})
		},

		methods: {
			amend() {
				this.$refs.popup.open()
			},
			close(done) {
				done()
			},
			confirm(done, value) {
				uni.showToast({
					icon: "none",
					title: "订单支付方法不支持退货"
				})
			},
			Bottom() { //页面上拉触底事件的处理函数
				if (this.pageSize <= this.total) {
					this.pageSize = this.pageSize + 10
					uni.request({
						url: this.$C.webUrl + `m.api?_gp=order&_mt=getOrderPage&pageSize=${this.pageSize}`,
						header: {
							'accessToken': this.Token
						},
						success: (res) => {
							this.orderItems = res.data.data.items
							this.pageNo = res.data.data.pageNo
							this.pageSize = res.data.data.pageSize
							this.total = res.data.data.total
						}
					})
				} else {
					uni.showToast({
						icon: "none",
						title: "纵向滚动已经到底部了！"
					})
				}
				console.log(this.pageSize)
			},
			// 判断它的状态点击跳到对应的数据
			intervalChange(e) {
				console.log(e);
				this.active = e.detail.current
				var data = 0
				switch (this.active) {
					case 0:
						data = 0
						break;
					case 1:
						data = 10
						break;
					case 2:
						data = 20
						break;
					case 3:
						data = 30
						break;
					case 4:
						data = 40
						break;
					case 5:
						data = 60
						break;
				}
				uni.request({
					url: this.$C.webUrl + `m.api?_gp=order&_mt=getOrderPage&status=${data}&pageNo=1`,
					header: {
						'accessToken': this.Token
					},
					success: (res) => {
						console.log(res)
						this.orderItems = res.data.data.items
						this.pageNo = res.data.data.pageNo
						this.pageSize = res.data.data.pageSize
						this.total = res.data.data.total
					}
				})
			},
			orderList(e) {
				this.active = e
			}

		},
		filters: {
			// 判断状态
			state(value) {
				switch (value) {
					case 10:
						return value = '未付款'
						break;
					case 12:
						return value = '正在拼团'
						break;
					case 20:
						return value = '待出库'
						break;
					case 30:
						return value = '待收货'
						break;
					case 40:
						return value = '待评价'
						break;
					case 50:
						return value = '已完成'
						break;
					case 60:
						return value = '退款中'
						break;
					case 70:
						return value = '已退款'
						break;
					case 80:
						return value = '已取消'
						break;
					case 90:
						return value = '已取消(系统)'
						break;
				}
			},
			// 时间戳
			timeStamp: function(value) {
				if (!value) return '';
				var now = new Date(value);
				console.log("time:" + JSON.stringify(now));
				var year = now.getFullYear();
				var month = now.getMonth() + 1;
				if (month < 10) {
					month = '0' + month
				}
				var date = now.getDate();
				if (date < 10) {
					date = '0' + date
				}
				return year + "-" + month + "-" + date
			},
			timeStamp: function(value) { //具体到时分秒
				var date = new Date(value); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var year = date.getFullYear();
				var month = ("0" + (date.getMonth() + 1)).slice(-2);
				var sdate = ("0" + date.getDate()).slice(-2);
				var hour = ("0" + date.getHours()).slice(-2);
				var minute = ("0" + date.getMinutes()).slice(-2);
				var second = ("0" + date.getSeconds()).slice(-2);
				// 拼接
				var result = year + "-" + month + "-" + sdate + " " + hour + ":" + minute;
				// 返回
				return result;
			}
		},
	}
</script>

<style>
	.orderList {
		width: 100%;
	}

	.empty image {
		width: 200upx;
		height: 200upx;
	}

	.empty {
		position: fixed;
		left: 38%;
		top: 38%;
	}

	.action-btn text {
		border-radius: 100px;
		padding: 10upx 10upx;
		border: 1px solid rgba(0, 0, 0, .2);
	}

	.action-btn {
		width: 80px;
		height: 30px;
		margin: 0;
		margin-left: 12px;
		padding: 0;
		float: right;
		text-align: center;
		line-height: 30px;
		font-size: 13px;
		color: #303133;
		background: #fff;
		border-radius: 100px;
	}

	.action-box {
		align-items: center;
		height: 50px;
		position: relative;
		padding-right: 30px;
	}

	.centre_name {
		width: 500upx;
		line-height: 50upx;
		overflow: hidden;
		/*超出部分隐藏*/
		white-space: nowrap;
		/*让文本强制在一行不换行*/
		text-overflow: ellipsis;

	}

	.swiper-bottom text {
		margin: 0 4px;
		color: #303133;
	}

	.swiper-bottom {
		width: 100%;
		display: flex;
		align-items: baseline;
		padding: 10px 40px;
		font-size: 13px;
		color: #909399;
		padding-left: 340upx;
	}

	.swiper-centre text {
		font-size: 13px;
		color: #909399;
	}

	.swiper-centre {
		height: 150upx;
		padding: 0upx 10upx;
		display: flex;

	}

	.swiper-top text {
		color: #fa436a;
	}

	.swiper-top {
		width: 90%;
		color: #909399;
		line-height: 80upx;
		display: flex;
		justify-content: space-between;
	}

	.swiper-content image {
		width: 140upx;
		height: 140upx;
		display: inline-block;
		margin-right: 20upx;
	}

	.swiper-content {
		width: 100%;
		padding: 0upx 30upx;
		background: #FFFFFF;
		font-size: 30upx;
		color: #303133;
		margin: 20upx auto;
	}

	.order_bottom {
		width: 100%;
		background: #F8F8F8;
		height: 87.2vh;
	}

	.activelist {
		color: #fa436a;
		border-bottom: 1.5px solid #fa436a;
		display: flex;
	}

	.orderList_conteot text {
		text-align: center;
		margin: auto;
	}

	.orderList_conteot view {
		display: flex;
	}

	.orderList_conteot {
		line-height: 80upx;
		font-size: 30upx;
		color: #303133;
		width: 12%;
	}

	.orderList_nav {
		width: 100%;
		display: flex;
		justify-content: space-around;
		height: 10%;
	}
</style>
